/*
  Copyright 2014 The Oppia Authors. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/* Animation keyframes. These must be placed at the top of the file
   in order to work in IE.
*/
@-webkit-keyframes dot {
  0% { opacity: 0; }
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes dot {
  0% { opacity: 0; }
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes dot {
  0% { opacity: 0; }
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Angular material overrides. */
md-input-group.long > input
{
  width: 100%;
  height: 45px;
}

md-input-group.oppia-blue-on-focus > input:focus {
  border-bottom-color: rgb(63, 81, 181);
  border-bottom-width: 2px;
}

md-input-group.md-default-theme label
{
  font-size: 16px;
  font-weight: 200;
  margin-bottom: 0;
}

.md-button-success {
  color: #009688;
}

/* Bootstrap overrides and additions. */
html {
  height: 100%;
}

body {
  color: #222;
  font-family: "Roboto";
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1, h2 {
  color: #000;
}

h3 {
  color: #222;
  line-height: 1.1;
}

a {
  color: #0844aa;
  cursor: pointer;
}

a:hover {
  color: #3f2c76;
}

a:focus {
  outline-style: none;
}

input.ng-dirty.ng-invalid, md-input-group.md-default-theme input.ng-dirty.ng-invalid {
  border-bottom-color: #F44336;
}

/* Change the color of odd-numbered lines in a table. */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f0f0f0;
}

.oppia-form-error {
  color: red;
}

.oppia-rule-warning-text {
  color: red;
  font-style: italic;
}

.oppia-serious-warning-text {
  color: red;
}

.oppia-disabled-contenteditable {
  background-color: #eee;
  cursor: not-allowed;
  padding: 10px 5px;
  opacity: 1;
}

p {
  line-height: 1.5;
  /* The following should be the same as the line-height (1.5). */
  margin: 1.5em 0;
  text-align: left;
  word-spacing: 0;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

.label {
  margin: auto 4px;
}
.label-info {
  background-color: #18447E;
}

/*
  The following rule ensures that, as the viewport gets
  smaller, any media will scale down according to its
  container's width.
*/
img, video, canvas {
  max-width: 100%
}

textarea {
  width: 90%;
}

/*
  Adjustments for the jWysiwyg RTE, to allow it to adopt the size
  of its container.
*/
div.wysiwyg, div.wysiwyg iframe.wysiwyg-content {
  width: 100%;
}
div.wysiwyg iframe.wysiwyg-content-small {
  height: 70px;
}
div.wysiwyg iframe.wysiwyg-content-large {
  height: 200px;
}

/*
  Styles for the global navigation sidebar menu.
*/
.oppia-base-container {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  position: relative;
}

/*
  Note that adding "overflow-y: scroll;" will
  break infinite scrolling in the gallery page.
*/
.oppia-content-container {
  height: 100%;
  left: 0;
  position: relative;
  transition: transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
}

.oppia-sidebar-menu-open .oppia-content-container::after {
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 100%;
}
.oppia-sidebar-menu-closed .oppia-content-container::after {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.oppia-sidebar-menu {
  background: #fff;
  color: white;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  width: 260px;
  z-index: 100;
}
.oppia-sidebar-menu-transition {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.oppia-sidebar-menu::after {
  background: rgba(0,0,0,0.2);
  content: '';
  display: none;
  height: 100%;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 100%;
}

.oppia-sidebar-menu-icon {
  margin-left: 8px;
  margin-right: 19px;
}

.oppia-sidebar-menu ul {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  padding-top: 10px;
  font-size: 16px;
}
.oppia-sidebar-menu hr {
  margin-top: 0;
  margin-bottom: 0;
}
.oppia-sidebar-menu .oppia-sidebar-section-header {
  color: #888;
  display: block;
  margin-left: 10px;
  padding: 1em 0 0 0;
  text-decoration: none;
}
.oppia-sidebar-menu a {
  color: #333;
  display: block;
  padding: 1em 0 1em 18px;
  text-decoration: none;
}
.oppia-sidebar-menu a:hover {
  background: rgb(243, 248, 255);
}
.oppia-sidebar-menu li.active a {
  background: rgba(243, 248, 255, 0.5);
}

.oppia-sidebar-logo {
  height: 32px;
  margin-bottom: 5px;
  margin-left: 15px;
}
.oppia-sidebar-logo-container {
  color: #333;
  margin: 0 auto;
  width: 120px;
}

.oppia-sidebar-header {
  background: #eee;
  border-bottom: 1px solid #ccc;
  height: 56px;
  padding-top: 6px;
}

.oppia-sidebar-menu-open .oppia-sidebar-menu {
  box-shadow: 1px 0 3px rgba(0,0,0,0.12), 1px 0 2px rgba(0,0,0,0.24);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.oppia-sidebar-menu-open .oppia-sidebar-menu::after {
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  width: 0;
}

/*
  This is needed for proper display of tabs. See

  https://github.com/angular-ui/bootstrap/commit/8620aedba99b05822311
*/
.navbar-nav, .pagination {
  cursor: pointer;
}

.navbar {
  border: 0px;
  margin-bottom: 0;
  width: 100%;
}

.navbar-nav.oppia-navbar-nav > li > a {
  color: #fff;
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  height: 56px;
  padding-top: 17px;
}

.oppia-navbar-breadcrumb {
  color: #fff;
  cursor: default;
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  padding-top: 17px;
  padding-bottom: 15px;
}

.oppia-navbar-breadcrumb-separator {
  padding-right: 7px;
}
.oppia-navbar-breadcrumb-separator:after {
  content: ">";
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
}

.navbar-default .navbar-nav > li > a.oppia-no-hover-change:hover,
.navbar-default .navbar-nav > li > a.oppia-no-hover-change:focus {
  background: inherit;
  color: #fff;
}

.navbar-nav > li.active > a, .navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a, .navbar-nav > li.active > a:focus {
  color: white;
  background: rgb(2, 38, 86);
}

.navbar-default .navbar-container {
  background: #05a69a;
  height: 56px;
}

.navbar-default .dropdown-menu {
  background: #fff;
}

.navbar-default .navbar-nav > li > a, {
  color: #fff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav .open > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: #05a69a;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav .open > a:hover,
.navbar-default .navbar-nav .open > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  background: #fff;
  color: #05a69a;
}

.navbar-default .navbar-nav > li.dropdown.open,
.navbar-default .navbar-nav > li.dropdown.open > a {
  background: #fff;
  color: #05a69a;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #06b9ac;
  color: #fff;
}

/* In Bootstrap, the link at the top of the default dropdown menu cannot be
   clicked -- so, in such cases (e.g. for the 'Sign in' link at the top right),
   we use this instead.
*/
.oppia-clickable-dropdown:hover ul.dropdown-menu {
  display: block;
}

.oppia-share-dropdown-menu {
  min-width: 30px;
  width: 46px;
}

.oppia-share-dropdown-menu li > a {
  font-weight: bolder;
  padding: 10px;
  text-align: center;
}

.oppia-share-dropdown-menu:hover .oppia-share-dropdown-toggle {
  color: #05a69a;
  background-color: white;
}

.nav .dropdown:hover > .dropdown-menu {
  border: none;
}

/* Show the navbar submenu dropdowns on-hover rather than on-click, if the
   screen size is large enough. */
@media (min-width: 768px) {
  .nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .nav .dropdown:hover > .dropdown-menu > li > a {
    color: #05a69a;
  }
  .nav .dropdown:hover > .dropdown-menu > li > a:hover {
    background-color: #eee;
    color: #888;
  }
}

.oppia-main-content {
  margin: 10px;
  padding: 10px;
  width: 100%;
}

.oppia-align-center {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.oppia-exploration-ctrl {
  margin: 0 5px;
}

.oppia-loading-fullpage {
  border: 1px;
  border-radius: 5px;
  font-size: 200%;
  height: 100%;
  position: fixed;
  top: 35%;
  width: 100%;
  z-index: 1000;
}
.oppia-loading-dot-one {
  opacity: 0;
  animation: dot 1.5s infinite;
  animation-delay: 0.0s;
  -moz-animation: dot 1.5s infinite;
  -moz-animation-delay: 0.0s;
  -webkit-animation: dot 1.5s infinite;
  -webkit-animation-delay: 0.0s;
}
.oppia-loading-dot-two {
  opacity: 0;
  animation: dot 1.5s infinite;
  animation-delay: 0.3s;
  -moz-animation: dot 1.5s infinite;
  -moz-animation-delay: 0.3s;
  -webkit-animation: dot 1.5s infinite;
  -webkit-animation-delay: 0.3s;
}
.oppia-loading-dot-three {
  opacity: 0;
  animation: dot 1.5s infinite;
  animation-delay: 0.6s;
  -moz-animation: dot 1.5s infinite;
  -moz-animation-delay: 0.6s;
  -webkit-animation: dot 1.5s infinite;
  -webkit-animation-delay: 0.6s;
}

.oppia-navbar-button-container {
  border-radius: 0;
  margin-top: 10px;
}

.btn.oppia-navbar-add-exploration-button {
  background-color: rgba(5, 190, 178, 0.9);
  color: rgba(255,255,255,0.8);
  font-size: 15px;
  height: 34px;
  padding: 3px 12px 4px 12px;
  margin-right: 5px;
}

@media (max-width: 1050px) {
  .oppia-gallery-language-selector {
    display: none;
  }
  .oppia-gallery-category-selector .btn {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
}

@media (max-width: 890px) {
  .oppia-gallery-category-selector {
    display: none;
  }
  .oppia-splash-search-text-input {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
}

@media (max-width: 768px) {
  .oppia-navbar-add-exploration-button {
    display: none;
  }
}

.btn.oppia-navbar-add-exploration-button:hover {
  background-color: rgba(5, 190, 178, 1);
  color: rgba(255,255,255,1);
}

.oppia-navbar-add-exploration-button-plus {
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 5px;
}

.oppia-gallery-tiles-introduction {
  font-size: 1em;
  padding-bottom: 20px;
}

.oppia-gallery-tiles-container {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 800px;
  min-height: 500px;
  padding-bottom: 25px;
}

md-card.oppia-gallery-tile {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  color: #888;
  height: 120px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.oppia-gallery-tile:hover {
  background-color: #f5f5f5;
}

.oppia-gallery-tile-container-link {
  height: 100%;
  width: 100%;
}

.oppia-gallery-tile-image-container {
  height: 120px;
  left: 0;
  top: 0;
  width: 120px;
}
/* This centers the image horizontally and vertically. */
.oppia-gallery-tile-image {
  height: 120px;
  width: 120px;
}

.oppia-gallery-tile-contents {
  height: 100%;
  padding: 23px 58px;
  width: 100%;
}
.oppia-gallery-tile-contents:hover {
  text-decoration: none;
}

.oppia-gallery-tile-details {
  padding-left: 100px;
  padding-top: 5px;
}
.oppia-gallery-tile-first-row {
  font-size: 120%;
  margin-bottom: 8px;
}
.oppia-gallery-tile-title {
  color: #333;
  font-weight: bold;
}
@media (max-width: 365px) {
  .oppia-gallery-tile-image-container {
    display: none;
  }
  .oppia-gallery-tile-details {
    padding-left: 0;
  }
}
@media (max-width: 800px) {
  .oppia-gallery-tiles-introduction {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.oppia-gallery-tile-second-row {
  font-size: 90%;
}

.oppia-gallery-edit-btn {
  font-size: 12px;
  margin-top: 10px;
  position: absolute;
  right: 1px;
  top: -9px;
  border-color:transparent;
  background-color: transparent;

}
.oppia-gallery-edit-btn:hover {
  background: transparent;
  border-color: transparent;
  color: green;
}



.carousel-indicators {
  margin-bottom: 120px;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
  margin-top: -80px;
}

.oppia-page-title {
  color: #222;
  font-size: 30px;
  margin: 0 0 30px 0;
}

.oppia-content {
  margin: 0 auto;
  max-width: 630px;
  -webkit-overflow-scrolling: touch;
  width: 80%;
}

.oppia-alert-blocks {
  left: 20%;
  position: fixed;
  width: 60%;
  z-index: 3000;
}

.oppia-form input.ng-invalid.ng-dirty {
  border: 2px solid #FA787E;
}

.oppia-gallery-frame {
  border-radius: 20px;
  margin: 10px;
  padding: 10px;
  width: 100%;
}

.oppia-grayed {
  color: gray;
  opacity: 0.5;
}

.oppia-help {
  height: 16px;
  width: 16px;
}

.oppia-main-body {
  height: 100%;
  margin: 0 auto -4em;
  min-height: 100%;
}

.oppia-cc-icon {
  bottom: 0px;
  position: absolute;
  right: 25px;
}

.oppia-wide-panel {
  border: 1px solid #dde0FF;
  border-radius: 20px;
  width: 100%;
}
.oppia-wide-panel-content, .oppia-about {
  font-size: large;
  margin: 5px auto;
  min-height: 400px;
  padding: 20px;
}
.oppia-about {
  margin-top: 0;
}

.oppia-warning {
  background: #F9EDBE;
  width: 80%;
  max-width: 700px;
}
.oppia-warning-chevron {
  font-size: 10px;
  padding-left: 4px;
  padding-top: 4px;
}

.oppia-placeholder {
  color: #888;
  font-style: italic;
}

.oppia-state-name-container {
  background: #eee;
  border-bottom-left-radius: 5px;
  margin: 2px 7px;
  padding: 6px;
}

.oppia-editor-cards-container {
  margin: auto;
  max-width: 560px;
}
.oppia-editor-card-with-avatar {
  background: rgb(255,255,255);
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  max-width: 560px;
  padding: 0;
}

.oppia-editor-card {
  background: rgb(255,255,255);
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  max-width: 800px;
  padding: 32px;
  padding-bottom: 40px;
}

.oppia-editor-avatar {
  height: 24px;
  left: -43px;
  position: absolute;
  width: 24px;
}

.oppia-pre-avatar-oppia, .oppia-pre-avatar-user {
  position: relative;
}
.oppia-pre-avatar-oppia::before, .oppia-pre-avatar-user::before {
  background-size: 24px 24px;
  content: "";
  height: 24px;
  left: -42px;
  position: absolute;
  width: 24px;
}
.oppia-pre-avatar-oppia::before {
  background-image: url('/images/general/oppia_black_48px.png');
  top: 2px;
}
.oppia-pre-avatar-user::before {
  background-image: url('/images/general/user_mint_48px.png');
  top: 8px;
}

.oppia-editor-card-body {
  position: relative;
}
.oppia-editor-card-body h3 {
  font-size: 18px;
  margin: 0;
}
.oppia-editor-card-body h4 {
  font-size: 14px;
  margin: 0;
}
.oppia-editor-card-body form {
  margin: 0;
}

.oppia-editor-card-section {
  padding: 0 50px 0 65px;
}

.oppia-state-content {
  min-height: 20px;
  padding: 5px 0 15px 10px;
}

.oppia-state-content-display {
  padding: 4px;
  text-align: justify;
  max-width: 445px;
}

.oppia-prevent-selection {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.oppia-save-state-item-button {
  margin-left: 5px;
}

.oppia-editable-section {
  cursor: pointer;
  position: relative;
}
.oppia-editable-section:hover .oppia-state-content-display,
.oppia-editable-section:hover .oppia-interaction-preview,
.oppia-editable-section:hover .oppia-rule-preview {
  background: #eee;
  border-radius: 4px;
}

.oppia-interaction-preview {
  opacity: 0.5;
  padding: 4px;
}

.oppia-editor-edit-icon {
  font-size: 16px;
  opacity: 0.2;
  position: absolute;
  right: -20px;
  top: 5px;
}

.oppia-editable-section:hover .oppia-editor-edit-icon {
  opacity: 0.8;
}

.oppia-click-to-start-editing {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 50;
}

/* Styles for the state graph vizualization. */

.oppia-graph-viz-container {
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 300px;
  overflow-y: hidden;
  position: relative;
}

/* Styles for the statistics page. */

.oppia-back-arrow {
  float: left;
  margin-right: 5px;
}

.oppia-add-rule-button {
  background-color: rgba(5,140,166,0.9);
  border: 0;
  border-radius: 0;
  color: white;
  font-size: 14px;
  opacity: 0.9;
  padding: 7px;
  width: 100%;
}

.oppia-add-rule-button:hover,
.oppia-add-rule-button:active,
.oppia-add-rule-button:focus {
  background-color: rgba(5,140,166,1);
  color: white;
  opacity: 1;
}

.oppia-small-delete-button {
  padding-top: 3px;
}

.oppia-graph-resize-button {
  border: 0px;
  padding: 9px 10px 6px 10px;
  position: absolute;
  right: 2px;
  top: 2px;
}

.nav-pills > li > a.oppia-rule-tab {
  background: rgba(0,0,0,0.05);
  border-radius: 0;
  border-bottom: 1px solid #f0f0f0;
  color: #aaa;
  padding: 7px 15px;
  width: 100%;
}
.nav-pills > li:hover > a.oppia-rule-tab {
  background: rgba(0,0,0,0.1);
}
.nav-pills > li.active > a.oppia-rule-tab-active {
  background: rgba(5,140,166,0.1);
  border-right: 0;
  color: #333;
  cursor: default;
}

.oppia-default-rule-tab {
  border-left: 1px solid #ddd;
}

.oppia-rule-body-container {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.oppia-readonly-rule-tile {
  border-radius: 4px;
  margin-bottom: 0;
  margin-left: 0;
  padding: 4px;
  padding-top: 9px;
}

.oppia-readonly-rule-tile img, .oppia-rule-tab img {
  max-height: 50px;
}

.oppia-rule-dest-link {
  margin-left: 5px;
  position: absolute;
  width: 400px;
  /* This must be larger than the z-index in
     .oppia-interactive-section-click-handler, so that the rule does not
     switch to edit mode when the destination link is clicked. */
  z-index: 200;
}

.oppia-rule-save-cancel-buttons {
  margin-bottom: 5px;
  margin-top: 2px;
}

.oppia-rule-sort-handle {
  cursor: move;
}
.oppia-rule-sort-arrows-container {
  left: 10px;
  margin-left: 5px;
  opacity: 0.3;
  position: absolute;
  top: 6px;
  width: 25px;
  /* This is needed for the sort handle to be above the rule tile. */
  z-index: 1;
}
.oppia-rule-sort-arrows {
  font-size: 18px;
  margin-left: 3px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.oppia-rule-edit-feedback {
  position: relative;
}

.about-tabs {
  margin-bottom: 0;
}

table.oppia-padded-table {
  border: 1px solid black;
  padding: 5px;
}
table.oppia-padded-table th, table.oppia-padded-table td {
  border: 1px solid black;
  padding: 5px;
}

/* Styles for parameter labels. */
oppia-parameter {
  background-color: #18447E;
  border-radius: .25em;
  color: white;
  display: inline;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  margin: auto 4px;
  padding: .2em .6em .3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.oppia-param-arrow-button {
  border: 0px;
  font-size: 14px;
  padding: 0px;
}

.oppia-tutorial-tooltip {
  min-width: 400px !important;
}

.oppia-post-tutorial-popover {
   display: block;
   left: -77px;
   top: 40px;
   width: 200px;
}

/* Hide the search icon in the rule destination dropdown. */
.oppia-rule-dest-select2 .select2-search input {
  background: none;
}

.oppia-dashboard-row {
  cursor: pointer;
}
.oppia-dashboard-row:hover {
  background: #eee;
}
.oppia-dashboard-row-recent {
  background: #fff4ca;
  cursor: pointer;
}
.oppia-dashboard-row-recent:hover {
  background: #ffe279;
}

.oppia-dashboard-status-green {
  color: #65e065;
  text-transform: capitalize;
}

.oppia-dashboard-status-grey {
  color: #888;
  text-transform: capitalize;
}

.oppia-dashboard-tile-metadata-parent {
  float: right;
  padding-top: 25px;
  width: 25%;
}

.oppia-dashboard-tile-metadata {
  border-left-color: #DADADA;
  border-left-style: ridge;
  border-left-width: thin;
  color: #888;
  height: 70px;
  padding-left: 20px;
  padding-right: 30px;
  padding-top: 5px;
}

md-card.oppia-dashboard-tile {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  color: #888;
  height: 120px;
  margin: 0;
  padding: 0;
  position: relative;
}

ul.oppia-dashboard-tiles {
  list-style-type: none;
  margin-top: 30px;
  padding-left: 0px;
}

.oppia-large-modal-window .modal-dialog {
  max-width: 900px;
  width: 80%;
}
.oppia-large-modal-window .modal-body {
  height: 60vh;
}

.oppia-vcenter {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

.oppia-disabled-link {
  opacity: 0.6;
  pointer-events: none;
}

/* Splash page. */

.oppia-splash-search-form {
  margin-top: 10px;
  padding-right: 0px;
}

.oppia-splash-search-input {
  background: #04857c;
  border: 1px solid #018c7f;
  border-radius: 0;
  color: white;
  font-size: 15px;
  height: 34px;
}

.oppia-splash-search-input.btn {
  color: rgba(255,255,255,0.7);
}

.oppia-splash-search-input.btn:hover {
  color: #fff;
}

.oppia-splash-search-input::-webkit-input-placeholder {
  color: #ccc;
}
.oppia-splash-search-input:-moz-placeholder {
  color: #ccc;
}
.oppia-splash-search-input::-moz-placeholder {
  color: #ccc;
}
.oppia-splash-search-input:-ms-input-placeholder {
  color: #ccc;
}

.oppia-splash-search-icon {
  background: #04857c;
  border: 1px solid #018c7f;
  color: white;
}

/* CSS3 Animations */
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.oppia-animate-spin {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;

  -ms-animation-name: spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: ease-in-out;

  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.oppia-gallery-banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 650px;
  width: 100%;
}
.oppia-gallery-banner-content {
  color: #fff;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 56px;
  position: absolute;
  text-align: center;
  top: 205px;
  width: 100%;
  z-index: 100;
}
@media(max-width: 368px) {
  .oppia-gallery-banner-content {
    top: 125px;
  }
}

.oppia-gallery-banner-tagline {
  color: #fff;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 24px;
  padding-top: 250px;
}

.oppia-gallery-banner-link {
  color: rgba(251, 234, 43, 1);
}
.oppia-gallery-banner-link:hover {
  color: rgba(255, 238, 47, 1);
  text-decoration: none;
}

.oppia-gallery-interstitial {
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,1));
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  font-size: 1.3em;
  margin-top: -120px;
  min-height: 120px;
  padding-bottom: 45px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 45px;
  position: relative;
  text-align: center;
  width: 100%;
}

oppia-expression-error-tag {
  background-color: #d9534f;
  border-radius: .25em;
  color: white;
  display: inline;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  margin: auto 4px;
  padding: .2em .6em .3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}
oppia-expression-error-tag:after {
  content: "Expression parsing error!";
}

/* Adjust the z-index for the tutorial components so that they do not go
   above the navbar.
*/
.ng-joyride-element-static[data-original-title],
div.ng-joyride-title {
  z-index: 999;
}
.ng-joyride.popover.sharp-borders {
  z-index: 1002;
}
div#ng-curtain {
  z-index: 997;
}

.oppia-navbar {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  cursor: default;
  height: 56px;
  left: -2%;
  padding-left: 2%;
  padding-right: 2%;
  position: fixed;
  width: 104%;
  /* This is larger than the editor tutorial's z-index, but smaller than
     the z-index for Bootstrap modals.
  */
  z-index: 1005;
}

.oppia-top-of-page-padding {
  /* This ensures that content is not tucked behind the fixed navbar. */
  padding-top: 100px;
}
.oppia-navbar-menu {
  margin-left: 10px;
  opacity: 0.9;
  outline-color: transparent;
}

.oppia-navbar-brand-name {
  float: left;
  height: 56px;
  line-height: 20px;
  margin-left: -10px;
  opacity: 0.9;
}

.oppia-navbar-brand-name:hover, .oppia-navbar-menu:hover {
  opacity: 1;
}

.oppia-logo {
  display: inline-block;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  height: 40px;
  margin-left: 6px;
  margin-top: 9px;
}
.oppia-navbar-profile-dropdown-toggle {
  height: 56px;
  color: #fff;
}
.oppia-navbar-profile > li > a:hover,
.oppia-navbar-profile > li > a:focus,
.oppia-navbar-profile .open > a,
.oppia-navbar-profile .open > a:hover,
.oppia-navbar-profile .open > a:focus {
  background-color: #fff;
  color: #05a69a;
}
.oppia-navbar-profile-dropdown {
  border: 0px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.oppia-navbar-profile-dropdown > li > a {
  color: #05a69a;
}
.oppia-navbar-profile-dropdown > li > a:hover,
.oppia-navbar-profile-dropdown > li > a:focus {
  background-color: #eee;
  color: #888;
}
.oppia-navbar-profile-picture-container {
  margin-left: 10px;
  text-align: right;
}
.oppia-navbar-profile-picture {
  height: 32px;
  width: 32px;
}
.oppia-navbar-role-indicator {
  background-color: #f7a541;
  border-radius: 20px;
  bottom: 10px;
  height: 15px;
  position: absolute;
  right: 25px;
  width: 15px;
}
.oppia-navbar-role-text {
  bottom: 0;
  color: white;
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  right: 3px;
}

.oppia-navbar-dashboard-indicator {
  background-color: #f7a541;
  border-radius: 20px;
  height: 15px;
  position: absolute;
  right: 25px;
  top: 8px;
  width: 15px;
}
.oppia-navbar-dashboard-indicator-text {
  bottom: 0;
  color: white;
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  right: 4px;
}

.oppia-select {
  background: white;
  border: #ddd solid 1px;
  border-radius: 4px;
  color: #555;
  padding: 5px;
}

.oppia-feedback-tab-row {
  cursor: pointer;
}
.oppia-feedback-tab-row:hover {
  background: #eee;
}


.oppia-editor-sidebar {
  padding: 7px 5px 0 5px;
  position: absolute;
  right: 15px;
  top: 28px;
  width: 350px;
}
.oppia-editor-sidebar accordion .panel {
  border-radius: 0;
}
.oppia-editor-sidebar accordion .panel .panel-heading {
  background-color: #ddd;
  border-radius: 0;
  padding: 3px 10px;
}
.oppia-editor-sidebar accordion .panel .panel-title {
  font-weight: bold;
}
.oppia-editor-sidebar accordion .panel .panel-body {
  border-radius: 0;
  padding-right: 25px;
}
.oppia-editor-sidebar-section-header {
  background-color: #ddd;
  font-size: 1.2em;
  font-weight: bold;
  padding: 3px 10px;
}
.oppia-editor-sidebar-section-body {
  background-color: #fff;
  margin-bottom: 5px;
  padding-right: 25px;
  padding: 0 10px;
}

.oppia-exploration-warnings-indicator {
  border-style: inset;
  border-width: 0 9px 14px 9px;
  bottom: 10px;
  font-size: 0.8em;
  font-weight: bold;
  height: 0;
  position: absolute;
  right: 5px;
  width: 0;
}
.oppia-exploration-warnings-error-color {
  border-color: transparent transparent rgb(244,244,15) transparent;
  color: #333;
}
.oppia-exploration-warnings-critical-color {
  border-color: transparent transparent rgb(231,15,15) transparent;
  color: #fff;
}
.oppia-exploration-warnings-count {
  margin-left: -3px;
}
.dropdown-menu.oppia-exploration-warnings-box {
  background: #fcf8e3;
}
.oppia-exploration-warnings-header {
  font-size: 0.8em;
  font-weight: bold;
  margin: 0 5px;
}
.oppia-exploration-warnings-text {
  font-size: 0.9em;
  padding: 2px 5px;
  width: 250px;
}
.oppia-exploration-warnings-separator {
  margin: 0;
}

/* Adding multilevel submenu functionality to Bootstrap's dropdown
    See http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
*/
.oppia-dropdown-submenu {
  position: relative;
}

.oppia-dropdown-submenu > .dropdown-menu {
  border-radius: 0 6px 6px 6px;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -moz-border-radius: 0 6px 6px;
  top: 0;
  -webkit-border-radius: 0 6px 6px 6px;
}

.oppia-dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.oppia-dropdown-submenu > a:after {
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  content: " ";
  display: block;
  float: right;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  width: 0;
}

.oppia-dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}

.oppia-dropdown-submenu.pull-left {
  float: none;
}

.oppia-dropdown-submenu.pull-left > .dropdown-menu {
  border-radius: 6px 0 6px 6px;
  left: -100%;
  margin-left: 10px;
  -moz-border-radius: 6px 0 6px 6px;
  -webkit-border-radius: 6px 0 6px 6px;
}


.oppia-profile-picture-crop-area {
  background: #E4E4E4;
  height: 350px;
  margin-top: 20px;
  position: relative;
  width: 500px;
}
.oppia-profile-picture-reset-button {
  position: absolute;
  right: -50px;
  top: 0;
}

.oppia-page-cards-container {
  margin: auto;
  max-width: 660px;
  position: relative;
}
.oppia-page-card {
  background: rgb(255,255,255);
  font-size: 1.2em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  margin-top: 30px;
  padding: 30px 55px;
}
.oppia-page-card li {
  margin-bottom: 10px;
}

.oppia-dashboard-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  margin-bottom: 30px;
}

.oppia-timeline-card {
  padding: 15px 40px;
}

.oppia-about-anchor {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
}

.oppia-about-right-menu {
  width: 300px;
  position: fixed;
  top: 80px;
  left: 50%;
  margin-left: 360px;
}

.oppia-about-right-menu-subnav {
  font-size: 12px;
  margin-left: 0.7em;
}

.oppia-about-right-menu p {
  line-height: 1;
  margin: 0.5em 0;
}
.oppia-about-right-menu ul {
  list-style-type: none;
  padding-left: 20px;
}

/* Hide the 'Skip' icon on the editor tutorial. */
.skipBtn .glyphicon-ban-circle {
  display: none;
}

@media(max-width: 800px) {
  .oppia-page-heading {
    margin-left: 30px;
  }
}
